<template>  
    <div class="logistics-module">  
      <h2>物流模块</h2>  
    <h3>仓库管理</h3>  
    <div class="warehouse-list">  
      <div v-for="warehouse in warehouses" :key="warehouse.id" class="warehouse-item">  
        <div class="warehouse-info">  
          <h4>{{ warehouse.name }}</h4>  
          <p>地址: {{ warehouse.address }}</p>  
          <p>库存: {{ warehouse.inventory }}</p>  
        </div>  
        <div class="warehouse-buttons">  
          <button @click="editWarehouse(warehouse)" class="edit">编辑</button>  
          <button @click="deleteWarehouse(warehouse.id)" class="delete">删除</button>  
        </div>  
      </div>  
    </div>  
    <h3>添加/编辑仓库</h3>
      <form @submit.prevent="addOrUpdateWarehouse">  
        <div>  
          <label for="warehouse-name">仓库名称:</label>  
          <input type="text" v-model="currentWarehouse.name" id="warehouse-name" required>  
        </div>  
        <div>  
          <label for="warehouse-address">地址:</label>  
          <input type="text" v-model="currentWarehouse.address" id="warehouse-address" required>  
        </div>  
        <div>  
          <label for="warehouse-inventory">库存:</label>  
          <input type="number" v-model="currentWarehouse.inventory" id="warehouse-inventory" required>  
        </div>  
        <button type="submit">保存</button>  
      </form>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    data() {  
      return {  
        warehouses: [  
          { id: 1, name: '仓库A', address: '地址A', inventory: 100 },  
          { id: 2, name: '仓库B', address: '地址B', inventory: 200 },  
        ],  
        currentWarehouse: {  
          id: null,  
          name: '',  
          address: '',  
          inventory: 0,  
        },  
        editMode: false,  
      };  
    },  
    methods: {  
      editWarehouse(warehouse) {  
        this.currentWarehouse = { ...warehouse };  
        this.editMode = true;  
      },  
      deleteWarehouse(id) {  
        this.warehouses = this.warehouses.filter(warehouse => warehouse.id !== id);  
      },  
      addOrUpdateWarehouse() {  
        if (this.editMode) {  
          const index = this.warehouses.findIndex(warehouse => warehouse.id === this.currentWarehouse.id);  
          if (index !== -1) {  
            this.warehouses.splice(index, 1, { ...this.currentWarehouse });  
          }  
        } else {  
          // Assuming we auto-generate a new ID for simplicity  
          this.currentWarehouse.id = this.warehouses.length + 1;  
          this.warehouses.push({ ...this.currentWarehouse });  
        }  
        this.resetForm();  
      },  
      resetForm() {  
        this.currentWarehouse = {  
          id: null,  
          name: '',  
          address: '',  
          inventory: 0,  
        };  
        this.editMode = false;  
      },  
    },  
    watch: {  
      currentWarehouse: {  
        handler() {  
          if (this.editMode) {  
            this.currentWarehouse.id = this.currentWarehouse.id || null; // Ensure id is not lost  
          }  
        },  
        deep: true,  
      },  
    },  
  };  
  </script>  
    
    <style scoped>  
    .logistics-module {  
      max-width: 800px; /* 稍微增加宽度以容纳更多内容 */  
      margin: 0 auto;  
      padding: 30px;  
      border: 1px solid #e0e0e0; /* 更浅的边框颜色 */  
      border-radius: 12px; /* 增加圆角 */  
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 更柔和的阴影 */  
      background-color: #f9f9f9; /* 浅灰色背景 */  
    }  
      
    .warehouse-list {  
      margin-bottom: 30px;  
    }  
      
    .warehouse-item {  
      display: flex;  
      justify-content: space-between;  
      align-items: center;  
      border-bottom: 1px solid #e0e0e0;  
      padding: 15px 0;  
      transition: background-color 0.3s; /* 添加过渡效果 */  
    }  
      
    .warehouse-item:hover {  
      background-color: #f1f1f1; /* 鼠标悬停时改变背景颜色 */  
    }  
      
    .warehouse-item:last-child {  
      border-bottom: none;  
    }  
      
    .warehouse-info {  
      flex: 1; /* 让信息部分占据大部分空间 */  
    }  
      
    .warehouse-buttons {  
      display: flex;  
      gap: 10px; /* 按钮之间的间距 */  
    }  
      
    form div {  
      margin-bottom: 15px;  
    }  
      
    label {  
      display: block;  
      margin-bottom: 5px;  
      color: #333; /* 更深的文字颜色 */  
    }  
      
    input {  
      width: 100%;  
      padding: 10px;  
      box-sizing: border-box;  
      border: 1px solid #ccc; /* 添加边框 */  
      border-radius: 5px; /* 圆角 */  
      background-color: #fff; /* 白色背景 */  
      color: #333; /* 更深的文字颜色 */  
    }  
      
    input:focus {  
      border-color: #007bff; /* 聚焦时改变边框颜色 */  
      outline: none; /* 移除默认的聚焦轮廓 */  
    }  
      
    button {  
      padding: 10px 20px;  
      background-color: #007bff;  
      color: white;  
      border: none;  
      border-radius: 5px;  
      cursor: pointer;  
      transition: background-color 0.3s; /* 添加过渡效果 */  
    }  
      
    button:hover {  
      background-color: #0056b3;  
    }  
      
    button.delete {  
      background-color: #dc3545; /* 红色背景用于删除按钮 */  
    }  
      
    button.delete:hover {  
      background-color: #c82333; /* 鼠标悬停时改变删除按钮的背景颜色 */  
    }  
    </style>